<template>
  <div id="app">
    <div class="header">
      <h3>医务查询系统</h3>
      <navbar></navbar>
    </div>
    <div class="body">
      <mymenu ref="mymenu" class="mymenu left" />
      <div class="right">
      <router-view/>
      </div>
    </div>
    <!-- draggable="true" 鼠标拖动事件 -->
    <div class="music" >
        <a class="show" href="javascript:;" @click="showMusic('show')" >音乐播放器</a>
        <div class="music_box" style="display:none">
            <audio class="audio" :src="`/audio/${music_list[current_music]}`" @seeking="set_current_time($event)" @ended="next_song(1)"  controls>
                <!-- <source  type="audio/mpeg"> -->
            </audio>
            <div class="control">
                <a href="javascript:;" @click="next_song(-1)">上一曲</a>
                <a href="javascript:;" @click="next_song(1)">下一曲</a>
                
                <a class="hiden" href="javascript:;" @click="showMusic('hiden')" >隐藏</a>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import navbar from '@/components/navbar.vue'
import mymenu from '@/components/mymenu.vue'
export default {
  components:{
    navbar,
    mymenu
  },
  data(){
    return {
      music_list:[
          "明天，你好 - 牛奶咖啡.mp3",
          "Salt-Ava_Max-65793098.mp3",
          "Human_Legacy-Ivan_Torrent.mp3",
          "Rise-John_Dreamer.mp3",
          "Wish-S_E_N_S_-97887.mp3",
          "爱__很简单-陶喆.mp3",
          "路过-周殷廷.mp3",
          "送给未来的你-阳山伟伟.mp3",
          "小幸运(Live)-简弘亦-28766783.mp3",
          "漠河舞厅-柳爽.mp3"
      ],
      current_music:0
    }
  },
  methods:{
    showMusic(str){
        // if(!this.show_music){
        //     if(!show_music){
        //         return
        //     }else{
        //         this.show_music=true
        //     }
        // }
        let show = document.querySelector(".show")
        let hiden = document.querySelector(".hiden")
        let music = document.querySelector(".music_box")
        if(str=="show"){
            let audio = document.querySelector(".audio")
            audio.autoplay=true
            show.style.display="none"
            music.style.display="block"
        }else{
            show.style.display="block"
            music.style.display="none"
        }
    },
    next_song(n){
        // audio.setAttribute("autoplay",true)
        if(n==1){
            this.current_music<this.music_list.length-1?this.current_music+=1:this.current_music=0
        }else if(n==-1){
            this.current_music>0?this.current_music-=1:this.current_music=this.music_list.length-1
        }
    },
    set_current_time(el){
        let e = el.currentTarget
        let curtime = e.currentTime
        console.log(e.buffered.length,e.buffered.start(0),e.buffered.end(0)); 
    }
  },
  beforeCreate(){
    // 获取用户登录信息
    const logininfo = JSON.parse(localStorage.getItem("logininfo"));  // 把字符串转json格式
    if(logininfo){
      let new_time = Date.now()
      if(logininfo.expire>new_time){
        this.$store.state.global_var.logininfo = logininfo
        
      }else{
        localStorage.removeItem("logininfo")
        this.$toast("你的登录信息已过期，请重新登录")
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#app{
  background-color: #f1f1f1;
  border-radius: 20px;
  margin: auto;
  margin-top:20px;
  width: 1280px;
  height: 720px;
  letter-spacing: 1px;  // 文字间距
  // 改动
  display: flex;
  flex-direction: column;
  .body{
    display: flex;
    padding: 5px 5px;
    .left{
      padding: 5px 5px;
      border: 1px solid #ccc;
      border-right: none;
      border-radius: 10px;
      background-color: white;
      flex:1;
    }
    .right{
      padding: 5px 5px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: white;
      flex:9;
    }
  }
  
  h3{
    font-weight: bolder;
    font-size: 20px;
    text-align: center;
    padding:10px;
  }

  .music{
      position: fixed;
      left: 0px;
      top: 10px;
      
      overflow: hidden;
      // z-index: 0;
      display: flex;
      flex-direction: column;
      .music_box{
          background-color: rgb(36, 110, 6);
          border-radius: 20px;
      }
      .control{
          margin: 10px;
          a{
              margin:0px 20px;
              color: rgb(255, 254, 234);
              font-weight: bolder;
          }
      }
      
      .show{
          opacity: 0;
          color: rgb(255, 254, 234);
          font-weight: bolder;
      }
      .show:hover{
          opacity: 1;
      }
  }
}
</style>
